import React, { Component } from 'react';
import { StyleSheet, Text, View, Dimensions, Image, TouchableOpacity, Alert } from "react-native";
import { offerStyle } from './offerStyle';
import navigationSeevice from '../../../../../components/navigation/navigationSeevice';
import { Common } from '../../../../../component/common/Common';

const ScreenWidth = Dimensions.get('window').width;
const scale = ScreenWidth / 375;

export class SelectCpt extends Component {
	constructor(props) {
		super(props);
		let { data } = props || {};
		this.state = {
			data: data,
			isModal: false,
			index: this._getKey(data.selectKey, data)
		}
	}

	componentWillReceiveProps(props) {
		let { data } = props || {};
		console.log('data-0000', data)
		this.setState({
			data,
			index: this._getKey(data.selectKey, data)
		})
	}

	_getKey = (selectKey, data) => {
		let { listData } = data || {};
		let reseultIndex = -1;
		listData && listData.forEach((item, index) => {
			if (item.dictKey == selectKey) {
				reseultIndex = index
			}
		})
		return reseultIndex;
	}

	//切换功能
	_toggle = (onoff, title, priceFormlaId) => {
		let { callBack, data } = this.props || {};
		let { orderType, goodsId, bizModel, salesType, resourceApplyList, goodsCateIds, salesRuleId, selectKey, areaId, targetData } = data || {};
		console.log(resourceApplyList)
		console.log('data-结算公式', data)
		if (title === "结算公式") {
			navigationSeevice.navigate('DictionaryPage', {
				priceFormlaId: priceFormlaId || null,
				paramsData: { orderType, goodsId },
				getCallBack: (data) => {
					//console.log('结算公式回调', data);
					callBack && callBack({ priceFormlaId: data.formulaId, priceFormlaName: data.formulaName });
				}
			});
		}
		else if (title === "采销规则") {
			if (bizModel) {
				navigationSeevice.navigate('PurchasingRules', {
					bizModel, salesType, salesRuleId, selectKey,
					callback: (data) => {
						callBack(data);
					}
				});
			}
			else {
				Alert.alert('请先选择报盘模式')
			}
		}
		else if (title === "定向客户") {
			if (areaId && goodsCateIds && goodsCateIds.length > 0) {
				navigationSeevice.navigate('TargetCustomers', {
					goodsCateIds, bizModel, salesType, salePurchaseAreaId: areaId, targetData, callback: (data) => {
						callBack(data);
					}
				});
			}
			else if (!areaId) {
				Alert.alert(`请先选择${salesType === 'S' ? '销售' : '采购'}区域`)
			}
			else {
				Alert.alert('请先选择商品')
			}
		}
		else {
			this.setState({
				isModal: onoff
			})
		}
	}

	//回调
	_selectCallBack = (index) => {
		let { callBack } = this.props || {};
		let { data } = this.state;
		let { listData, id, selectKey, salesType } = data || {};
		if (selectKey === listData[index].dictKey) {
			this.setState({
				isModal: false
			})
			return
		}
		if ((id === 'bizModel' && selectKey) || (id === 'areaId' && selectKey && salesType === 'S')) {
			let text
			if (id === 'bizModel') {
				if (salesType === 'S') {
					text = "报盘模式修改会导致采销规则、商品、定向客户及其他关联内容被清空，是否确认"
				}
				else {
					text = "报盘模式修改会导致商品及其他关联内容被清空，是否确认"
				}
			}
			else {
				text = "区域修改会导致定向客户及其他关联内容被清空，是否确认"
			}
			Alert.alert(
				'提示',
				text,
				[
					{
						text: "取消",
						// onPress: () => this.setState({
						// 	isModal: false
						// })
					},
					{
						text: "确认", onPress: () => {
							this.setState({
								index,
								isModal: false
							})
							callBack && callBack({ [id]: listData[index].dictKey });
						}
					}
				]
			);
		}
		else {
			this.setState({
				index,
				isModal: false
			})
			if (id === "priceFormlaId") { // 暂定价特殊
				callBack && callBack({ id, value: listData[index].dictKey })
			} else {
				callBack && callBack({ [id]: listData[index].dictKey });
			}
		}
	}



	render() {
		let { style } = this.props;
		let { isModal, index, data } = this.state;
		let { title, listData, priceFormlaName, priceFormlaId } = data || {};
		let { keyName, valueStyle, valueTextStyle } = style || {};
		console.log('0000000000', data)
		return (
			<View style={offerStyle.lineBox}>
				<View style={[offerStyle.row, offerStyle.lay, keyName]}>
					<Text style={[offerStyle.radioRequire, offerStyle.required]}>*</Text>
					<Text style={offerStyle.fontSize}>{title || '-'}</Text>
				</View>
				<TouchableOpacity onPress={() => { this._toggle(true, title, priceFormlaId) }} style={[offerStyle.row, offerStyle.selectRight, valueStyle]}>
					<Text style={[offerStyle.selectRightText, offerStyle.fontSize, valueTextStyle, offerStyle.fontBold]}>{priceFormlaName || (listData && listData[index] && listData[index].dictName || '')}</Text>
					<Image source={require('../../../../../imgs/arrow.png')} style={[offerStyle.selectImg]} />
				</TouchableOpacity>
				<Common type="modal" demoData={(
					<Common type="listRadio" selectIndex={index} title={title} listData={listData} selectCallBack={this._selectCallBack} />
				)} isVisible={isModal} closeCallballFn={() => { this._toggle(false) }} />
			</View>
		)
	}
}

const styles = StyleSheet.create({
	selectBox: {
		flexDirection: 'row',
		paddingVertical: 20 * scale
	},
	rowStyle: {
		flexDirection: 'row'
	},


})